<template>
<uni-shadow-root class="partials-more_select_page-index"><view class="container">
  <view class="select_tab_list_three">
    <scroll-view scroll-y class="select_tab_list_three_block">
      <view v-for="(selectTabItem,indexOne) in (selectTab)" :key="selectTabItem.indexOne" class="select_tab_item_three">
        <view class="select_tab_item_three_title">
          <text>{{selectTabItem.title}}</text>
          <text style="color:#ccc;margin-left:6rpx" v-if="selectTabItem.type=='pull-down'">(单选)</text>
          <text style="color:#ccc;margin-left:6rpx" v-if="selectTabItem.type=='multi-select'">(可多选)</text>
        </view>
        
        <view class="select_tab_item_three_value_list" v-if="selectTabItem.type=='price_select'">
          <input class="price_input" placeholder="最低价" type="number" :value="selectResultsData["startPrice"]" placeholder-style="color:#e2e2e2;" @input="savePriceFun" data-type="startPrice"></input>
          <text class="interval">—</text>
          <input class="price_input" placeholder="最高价" type="number" :value="selectResultsData["endPrice"]" placeholder-style="color:#e2e2e2;" @input="savePriceFun" data-type="endPrice"></input>
        </view>
        
        <view class="select_tab_item_three_value_list" v-else-if="selectTabItem.type=='pro_type_select'">
          <view class="select_tab_item_value_name_three a" :style="'color:'+(setting.platformSetting.defaultColor)+';border:none'" v-if="haveProTyeData">
            <text>{{haveProTyeData.name}}</text>
          </view>
          <view class="select_tab_item_value_name_three" :data-father="indexOne" data-index="-1" data-type="type_select" :style="(!selectResultsData[selectTabItem.name]||selectResultsData[selectTabItem.name].length==0?"background:"+setting.platformSetting.defaultColor+";color:"+"#fff":"")" @click.stop.prevent="selectResult">
            <text>不限</text>
          </view>
          <view v-for="(selectTabItemValues,index) in (selectTabItem.listValues)" class="select_tab_item_value_name_three" :data-father="indexOne" v-if="index<=1" data-type="type_select" :data-index="index" :style="'background:'+(selectTabItemValues.state?setting.platformSetting.defaultColor:"")+';color:'+(selectTabItemValues.state?"#fff":"")" @click.stop.prevent="selectResult">
            <text>{{selectTabItemValues.value}}</text>
          </view>
          <view class="select_tab_item_value_name_three" :data-father="indexOne" data-index="-1" @click.stop.prevent="selectPopupType">
            <text>更多分类...</text>
          </view>
        </view>
        
        <view class="select_tab_item_three_value_list" v-else-if="selectTabItem.type=='attr_value'">
          <view class="select_tab_item_value_name_three" :data-father="indexOne" data-index="-1" data-type="attr_block" :style="(!selectTypeAttrResultsData[selectTabItem.name].value?"background:"+setting.platformSetting.defaultColor+";color:"+"#fff":"")" @click.stop.prevent="selectResult">
            <text>不限</text>
          </view>
          <view v-for="(selectTabItemValues,index) in (selectTabItem.listValues)" class="select_tab_item_value_name_three" :data-father="indexOne" data-type="attr_block" :data-index="index" :style="'background:'+(selectTabItemValues.state?setting.platformSetting.defaultColor:"")+';color:'+(selectTabItemValues.state?"#fff":"")" @click.stop.prevent="selectResult">
            <text>{{selectTabItemValues.value}}</text>
          </view>
        </view>
        
        <view class="select_tab_item_three_value_list" v-else>
          <view class="select_tab_item_value_name_three" :data-father="indexOne" data-index="-1" :style="(!selectResultsData[selectTabItem.name]||selectResultsData[selectTabItem.name].length==0?"background:"+setting.platformSetting.defaultColor+";color:"+"#fff":"")" @click.stop.prevent="selectResult">
            <text>不限</text>
          </view>
          <view v-for="(selectTabItemValues,index) in (selectTabItem.listValues)" class="select_tab_item_value_name_three" :data-father="indexOne" data-type="common_block" :data-index="index" :style="'background:'+(selectTabItemValues.state?setting.platformSetting.defaultColor:"")+';color:'+(selectTabItemValues.state?"#fff":"")" @click.stop.prevent="selectResult">
            <text>{{selectTabItemValues.value}}</text>
          </view>
        </view>
      </view>
    </scroll-view>
    <view class="multi_select_bg">
      <text class="multi_select_btn_clear" @click.stop.prevent="clearSelect" :style="'color:'+(setting.platformSetting.defaultColor)+';border:1rpx solid '+(setting.platformSetting.defaultColor)">重置</text>
      <text class="multi_select_btn" @click.stop.prevent="sureSelect" :style="'background:'+(setting.platformSetting.defaultColor)+';border:1rpx solid '+(setting.platformSetting.defaultColor)">确定</text>
    </view>
  </view>
</view>
  <select-product-type-popup :productType="productType" id="select-product-type-popup" v-if="productTypePopupState&&productType" @sureSelect="getChilrenPopupType"></select-product-type-popup></uni-shadow-root>
</template>

<script>
import SelectProductTypePopup from '../select_product_type_popup/index.vue'
global['__wxVueOptions'] = {components:{'select-product-type-popup': SelectProductTypePopup}}

global['__wxRoute'] = 'partials/more_select_page/index'
const app = getApp();
Component({
  properties: {
    data: {
      type: Object,
      value: 'default value',
    },
    locationList2: {
      type: Object,
    },
    showBtn: {
      type: String,
    },
    showTitle: {
      type: String,
    },
    userAddressCustomFormCommitId: {
      type: String,
    }
  },
  data: {
    someData: {},
    sysWidth:"",
    selectTab:[],
    selectResultsData:{},
    selectTypeAttrResultsData:{},
    productTypePopupState:false,
    productType:null,
    curProTypeId:0,
    haveProTyeData:null,
    getProAttrsFaceUrl:'wx_get_attrs_by_product_type_id'
  },
  ready:function(){
    console.log("====jifen======", this.data.data,app.globalData.setting)
    let that=this;
    that.getProductType();
    let selectResultsData = that.data.selectResultsData
    let selectTab=[
      { title: '价格区间', type: 'price_select', listValues: '', state: false, nameOne: "startPrice", nameTwo:'endPrice' },
      { title: '商品分类', type: 'pro_type_select', listValues: '', state: false, name: "categoryId" },
      { title: '商品标签', type: 'tag_select', listValues: '', state: false, name: "tag"  },
      { title: '营销标志', type: 'sale_flag_select', listValues: '', state: false, name: "saleTypeId" },
      { title: '特卖分类', type: 'special_sale_type_select', listValues: '', state: false, name: "itemSpecialSaleType"  },
    ] 
    for (let i = 0; i < selectTab.length;i++){
      if (selectTab[i].type == 'price_select'){
        selectResultsData[selectTab[i].nameOne] = ''
        selectResultsData[selectTab[i].nameTwo] = ''
      }else{
        selectResultsData[selectTab[i].name] = ''
      }
      if (app.globalData.setting && app.globalData.setting.platformSetting.tagsMap['产品'].length!=0 && selectTab[i].type=='tag_select') {
        selectTab[i].listValues=[]
        let listValues = app.globalData.setting.platformSetting.tagsMap['产品'];
        console.log("=======listValues=========", listValues)
        for (let j = 0; j < listValues.length; j++) {
          listValues[j].state = false;
          listValues[j].value = listValues[j].tagName;
          listValues[j].id = listValues[j].tagName;
        }
        selectTab[i].listValues = listValues
      } else if (selectTab[i].type == 'sale_flag_select') {
        selectTab[i].listValues = [
          { value: '新品', id: -100, state: false },
          { value: '热销', id: -101, state: false },
          { value: '折扣', id: -102, state: false },
          { value: '精品', id: -103, state: false },
        ]
      } else if (selectTab[i].type == 'special_sale_type_select') {
        selectTab[i].listValues = [
          { value: '满减特卖', id:1, state: false },
          { value: '买赠特卖', id:2, state: false },
          { value: '限购特卖', id:3, state: false },
          { value: '日限购', id:4, state: false },
          { value: '周限购', id:5, state: false },
          { value: '月限购', id:6,state: false },
        ]
      }
    }
    console.log("=======selectTab=========", selectTab, selectResultsData)
    that.setData({
      selectTab:selectTab,
      sysWidth: app.globalData.sysWidth,
      setting:app.globalData.setting,
      selectResultsData: selectResultsData,
    });
  },
  methods: {
    clearSelect: function () {
      let that = this;
      let selectTab = that.data.selectTab;
      let selectResultsData = that.data.selectResultsData;
      let selectTypeAttrResultsData = that.data.selectTypeAttrResultsData;
      let haveProTyeData = null
      wx.showModal({
        title: '提示',
        content: '主人~您确定要重置嘛?',
        success: function (res) {
          if (res.confirm) {
            for (let i in selectResultsData){
              selectResultsData[i]=''
            }
            selectTypeAttrResultsData={};
            let selectTabCopy = [];
            for (let i = 0; i < selectTab.length; i++) {
              console.log("==selectTab[i].type===", selectTab[i].type)
              if (selectTab[i].type.indexOf('attr_') == -1) {
                console.log("==selectTab[i]===", selectTab[i])
                selectTabCopy.push(selectTab[i])
              }
            }
            selectTab = selectTabCopy;
            for (let i = 0; i < selectTab.length;i++){
              for (let j = 0; j < selectTab[i].listValues.length; j++){
                selectTab[i].listValues[j].state=false;
              }
            }
            that.setData({ selectResultsData: selectResultsData, selectTypeAttrResultsData: selectTypeAttrResultsData, selectTab: selectTab, haveProTyeData: haveProTyeData});
            console.log('用户点击确定')
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        }
      })
    },
    sureSelect: function () {
      console.log("============sureSelect==========");
      let that=this;
      let selectTab = that.data.selectTab;
      let selectResultsData = that.data.selectResultsData;
      let selectTypeAttrResultsData = that.data.selectTypeAttrResultsData;
      let attrKeyValues=[]
      for (let i in selectTypeAttrResultsData){
        let str = selectTypeAttrResultsData[i].name + '-' + (selectTypeAttrResultsData[i].value || '')
        attrKeyValues.push(str) 
      }
      selectResultsData['attrKeyValues'] = attrKeyValues.join("|_|")
      console.log("============selectResult==========", selectResultsData, selectTab, selectTypeAttrResultsData);
      that.setData({ selectResultsData: selectResultsData});
      console.log("设置成功", that.data.selectResultsData)
      let params=''
      for (let i in selectResultsData){
        if (selectResultsData[i]){
          params += (i + "=" + selectResultsData[i] + '&')
        }
      }
      params = params.slice(0,-1)
      console.log("params", params);
      let link = (app.globalData.properties.style_product_list ? app.globalData.properties.style_product_list +".html" : "search_product.html") +'?' + params
      app.globalData.linkEvent(link)
    },
    savePriceFun:function(e){
      console.log("savePriceFun",e)
      let selectResultsData = this.data.selectResultsData;
      let type = e.currentTarget.dataset.type
      let value = Number(e.detail.value) 
      if (type =='startPrice'){
        selectResultsData['startPrice'] = value
      } else if (type == 'endPrice') {
        selectResultsData['endPrice'] = value
      }
      console.log("selectResultsData", selectResultsData)
      this.setData({ selectResultsData: selectResultsData})
    },
    selectResult:function(e){
      console.log("============selectResult==========",e);
      let that = this;
      let index = e.currentTarget.dataset.index;
      let type = e.currentTarget.dataset.type;
      let selectTab = that.data.selectTab;
      let selectResultsData = that.data.selectResultsData;
      let selectTypeAttrResultsData = that.data.selectTypeAttrResultsData;
      let fatherIndex = e.currentTarget.dataset.father;
      let value = ''
      let haveProTyeData = null
      for (let i = 0; i < selectTab[fatherIndex].listValues.length; i++) {
        selectTab[fatherIndex].listValues[i].state = false
      }
      if (index!='-1'){
        value = selectTab[fatherIndex].listValues[index].id
        selectTab[fatherIndex].listValues[index].state = true
        
      } else {
        value = ''
      }
      if (type == 'attr_block'){
        console.log("value", value)
        selectTypeAttrResultsData[selectTab[fatherIndex].name].value = value
      } else if (type == 'type_select'){
        selectResultsData['categoryId'] = value
        if (value){
          haveProTyeData = { name: selectTab[fatherIndex].listValues[index].name, id: selectTab[fatherIndex].listValues[index].id }
          that.getProductTypeAttrData(value)
        }else{
          console.log("产品类别不限")
          let selectTabCopy = [];
          for (let i = 0; i < selectTab.length; i++) {
            console.log("==selectTab[i].type===", selectTab[i].type)
            if (selectTab[i].type.indexOf('attr_') == -1) {
              console.log("==selectTab[i]===", selectTab[i])
              selectTabCopy.push(selectTab[i])
            }
          }
          selectTab = selectTabCopy;
        }
        that.setData({ haveProTyeData: haveProTyeData })
      }else{
        selectResultsData[selectTab[fatherIndex].name] = value
      }
      console.log("============selectResult==========", selectResultsData, selectTab, selectTypeAttrResultsData);
      that.setData({ selectTab: selectTab, selectResultsData: selectResultsData, selectTypeAttrResultsData: selectTypeAttrResultsData, })
    },
    selectPopupType:function(){
      let that=this;
      that.setData({ productTypePopupState:true})
    },
    getChilrenPopupType(e) {
      console.log("======getChilrenPopupType=========",e)
      let that=this
      let selectTab = that.data.selectTab;
      let selectResultsData = this.data.selectResultsData;
      let listValues = selectTab[1].listValues
      if (e.detail.id){
        for (let i = 0; i < selectTab[1].listValues.length; i++) {
          selectTab[1].listValues[i].state = false
          if (selectTab[1].listValues[i].id == e.detail.id){
            selectTab[1].listValues[i].state=true
          }
        }
        selectResultsData['categoryId'] = e.detail.id
        that.getProductTypeAttrData(e.detail.id)
        console.log("======selectResultsData=========", selectResultsData, selectTab)
        that.setData({ selectResultsData: selectResultsData, curProTypeId: e.detail.id, selectTab: selectTab, haveProTyeData: { name: e.detail.name, id: e.detail.id}})

      }
      that.setData({
        productTypePopupState: false,
      })
    },
    //获取产品分类的相关属性
    getProductTypeAttrData: function (id) {
      console.log("====getProductTypeAttrData=====", id);
      var that = this
      let selectTab = that.data.selectTab;
      let selectTabCopy=[];
      for (let i = 0; i < selectTab.length; i++) {
        console.log("==selectTab[i].type===", selectTab[i].type)
        if (selectTab[i].type.indexOf('attr_') == -1) {
          console.log("==selectTab[i]===", selectTab[i])
          selectTabCopy.push(selectTab[i])
        }
      }
      selectTab = selectTabCopy;
      let selectTypeAttrResultsData = {}
      let selectResultsData = that.data.selectResultsData
      var customIndex = app.globalData.AddClientUrl("/wx_get_attrs_by_product_type_id.html", { type: id})
      app.globalData.showToastLoading('loading', true)
      wx.request({
        url: customIndex.url,
        header: app.globalData.header,
        success: function (res) {
          wx.hideLoading()
          console.log("==res====", res.data)
          if (res.data.errcode == 0) {
            let productTypeAttrData = res.data.relateObj;
            let index=0;
            for (let i = 0; i < productTypeAttrData.length;i++){
              if (productTypeAttrData[i].attrType == 3 && productTypeAttrData[i].attrValue){
                selectTypeAttrResultsData['attr_' + productTypeAttrData[i].id] = { name: productTypeAttrData[i].attrShowName, value:''}
                let obj = { title: productTypeAttrData[i].attrShowName, type: 'attr_value', listValues: '', state: false, name: 'attr_' + productTypeAttrData[i].id };
                let listValues = productTypeAttrData[i].attrValue.split(',')
                for (let j = 0; j < listValues.length; j++) {
                  let listValuesObj = {};
                  listValuesObj.state = false;
                  listValuesObj.value = listValues[j];
                  listValuesObj.id = listValues[j];
                  listValues[j] = listValuesObj
                }
                obj.listValues = listValues
                console.log("=====index====", index, selectTypeAttrResultsData)
                selectTab.splice(2 + index, 0, obj)
                index++
              }
            }
            console.log("=====selectTypeAttrResultsData====", selectTypeAttrResultsData, selectTab)
            that.setData({ selectTab: selectTab, selectTypeAttrResultsData: selectTypeAttrResultsData})
          } else {
          }
          wx.hideLoading()
        },
        fail: function (res) {
          console.log("fail")
          wx.hideLoading()
          app.globalData.loadFail()
        }
      })
    },
    //获取产品分类
    getProductType: function (e, typeText) {
      console.log("====e=====", e);
      var that = this
      var customIndex = app.globalData.AddClientUrl("/wx_get_categories_only_by_parent.html")
      app.globalData.showToastLoading('loading', true)
      wx.request({
        url: customIndex.url,
        header: app.globalData.header,
        success: function (res) {
          wx.hideLoading()
          console.log("==res====", res.data)
          if (res.data.errcode == 0) {
            let productType = res.data.relateObj;
            let selectTab = that.data.selectTab;
            for (let i = 0; i < selectTab.length; i++) {
              if (selectTab[i].type == 'pro_type_select') {
                selectTab[i].listValues = []
                let listValues = productType
                console.log("=======listValues=========", listValues)
                for (let j = 0; j < listValues.length; j++) {
                  listValues[j].state = false;
                  listValues[j].value = listValues[j].name;
                  listValues[j].id = listValues[j].id;
                }
                selectTab[i].listValues = listValues
                
              }
            }
            that.setData({
              productType: productType,
              selectTab: selectTab, 
            })
            console.log("productType", that.data.productType)
          } else {
          }
          wx.hideLoading()
        },
        fail: function (res) {
          console.log("fail")
          wx.hideLoading()
          app.globalData.loadFail()
        }
      })
    },
    // 这里是一个自定义方法
    buttom: function () {
      app.globalData.wxLogin(1011)
    },
    tolinkUrl: function (e) {
      console.log(e.currentTarget.dataset.info)
      let info = e.currentTarget.dataset.info
      let jifenId = info.id
      let productId = info.productId
      let couponId = info.couponId
      let jifenNum = info.needJifen
      let jifenCount = info.count
      if (productId) {
        var a = "jifen_product_detail.html?type=jifen&productId=" + productId + '&jifenNum=' + jifenNum + '&jifenId=' + jifenId + '&jifenCount=' + jifenCount;
      }
      if (couponId) {
        var a = "coupon_detail.html?type=jifen&couponId=" + couponId;
      }
      app.globalData.linkEvent(a);
    },
  },
})
export default global['__wxComponents']['partials/more_select_page/index']
</script>
<style platform="mp-weixin">
.container{
  width: 100%;
}
/* 更多选项的样式 */
.select_tab_list_three{
  z-index: 11;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  font-size: 24rpx;
  color: #888;
  background:#fff;
  padding:20rpx;
}
.select_tab_list_three_block{
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin-bottom: 100rpx;
  overflow:hidden;
  height:100%;
}
.select_tab_item_three{
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.a{
  position: absolute;
  right:40rpx;
  top:-30rpx;
}
.select_tab_item_three_value_list{
  width: 100%;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  font-size: 24rpx;
  color: #888;
  background:#fff;
  padding: 35rpx 20rpx;
}
.select_tab_item_value_name_three{
  border:1rpx solid #f1f1f1;
  display:inline-block;
  text-align: center;
  padding:10rpx;
  margin:10rpx;
  width: 18%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.more_select{
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
  right: 25rpx;
  top: 0;
  padding:25rpx 0;
}
.more_select_icon{
  width: 36rpx;
  height: 36rpx;
  margin-right: 6rpx
}
.multi_select_bg{
  position: fixed;
  bottom: 0;
  left:0;
  width: 100%;
  background: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height:100rpx;
}
.multi_select_btn{
  padding: 10rpx 50rpx;
  color: #fff;
  border-radius: 16rpx;
  margin-left: 10rpx;
  width:60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.multi_select_btn_clear{
  padding: 10rpx 50rpx;
  background: #fff;
  border-radius: 10rpx;
  width:60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.price_input{
  background: #f8f8f8;
  border-radius: 60rpx;
  height: 60rpx;
  display: flex;
  line-height: 60rpx;
  align-items: center;
  justify-content: center;
  text-align:center;
  width: 45%;
}
.interval{
  margin: 0 20rpx;
}
</style>